<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/details.css"/>

	</head>
	<body>
		<div id="detail">
			<div class="head1">
				<div class="layui-row">
					<div class="layui-col-xs1">
						<div class="grid-demo"></div>
					</div>
					<div class="layui-col-xs4">
						<div class="grid-demo grid-demo-bg1">想淘精品好物，就上淘京</div>
					</div>

					<div class="layui-col-xs1">
						<div class="login">
							<div class="grid-demo grid-demo-bg1" id="classifiction_2" >
								<a id="login-reg" href="javascript:void(0)" onclick="logcheck()" style="margin-top: 5px;">登录/注册</a>
							</div>
							<div class="login_check">
								<div class="userpic"><a href="#" ><img src="imgs/购物.png" /></a></div>
								<div class="userinfo" >
									<div class="username" id="classifiction_2">
										<a id="uname" href="javascript:void(0)" >用户名</a>
										<h1><a href="javascript:void(0)" onclick="exit()">退出</a></h1>
									</div>
									<div class="userid" >ID:用户编号:<a id="uno" href="javascript:void(0)" >id</a></div>
								</div>
							</div>
						</div>

					</div>
					<div class="layui-col-xs1">
						<div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="order.html">我的订单</a></div>
					</div>
					<div class="layui-col-xs1">
						<div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="javascript:void(0)">我的淘京</a></div>
					</div>
					<div class="layui-col-xs1">
						<div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="javascript:void(0)">商家服务</a></div>
					</div>
					<div class="layui-col-xs1">
						<div class="grid-demo" id="classifiction_2"><a href="javascript:void(0)">关于淘京</a></div>
					</div>
					<div class="layui-col-xs1">
						<div class="grid-demo" id="classifiction_2"><a href="javascript:void(0)">企业采购</a></div>
					</div>

				</div>
			
				</div>
				
				<div class="head">
				    
				      <div class="logo_pic"><a href="#"><img src="imgs/logo2.png" /></a></div>
					  
				      <div class="serch">
							<div class="serch_box"><input type="text" name="username" id="content"  placeholder="淘入好物，就用淘京"></div>
							<div class="serch_pic" ><a href="javascript:void(0)" @click="showDatail()"><img src="imgs/serch.png"/></a></div>
					  </div>
					  <div class="shoppingcart">
						  <div class="shoppingcart_pic"><img src="imgs/shoppingcart.png" /></div>
						  <div class="shoppingcart_char"><a href="cart.html"><h1>我的购物车<div class="num" >{{carttotal}}</div></h1></a></div>
					  </div>
				</div>
				
				<div class="classification">
							<div class="layui-row">
							    <div class="layui-col-xs1">
							      <div class="grid-demo"></div>
							    </div>
								<div class="layui-col-xs1">
								  <div class="grid-demo grid-demo-bg1" id="classifiction_1"  ><a href="javascript:void(0)">商品分类</a></div>
								</div>
								<div class="layui-col-xs1">
								  <div class="grid-demo"></div>
								</div>
								
							    
								<div class="layui-col-xs1">
								  <div class="grid-demo grid-demo-bg1 cl1" id="cf1"><a href="javascript:void(0)" id="1" @click="showclassification">推荐</a></div>
								</div>
				
								<div class="layui-col-xs1">
								  <div class="grid-demo grid-demo-bg1 cl1" id="cf2"><a href="javascript:void(0)" id="2" @click="showclassification">美妆</a></div>
								</div>
								<div class="layui-col-xs1">
								  <div class="grid-demo grid-demo-bg1 cl1" id="cf3"><a href="javascript:void(0)" id="3" @click="showclassification">运动</a></div>
								</div>
								<div class="layui-col-xs1">
								  <div class="grid-demo grid-demo-bg1 cl1" id="cf4"><a href="javascript:void(0)" id="4" @click="showclassification">食品</a></div>
								</div>
								<div class="layui-col-xs1">
								  <div class="grid-demo grid-demo-bg1 cl1" id="cf5"><a href="javascript:void(0)" id="5" @click="showclassification">图书</a></div>
								</div>
								<div class="layui-col-xs1">
								  <div class="grid-demo grid-demo-bg1 cl1" id="cf6"><a href="javascript:void(0)" id="6" @click="showclassification">男装</a></div>
								</div>
								<div class="layui-col-xs1">
									<div class="grid-demo grid-demo-bg1 cl1" id="cf7"><a href="javascript:void(0)" id="7" @click="showclassification">鞋类</a></div>
								</div>
								<div class="layui-col-xs1">
								  <div class="grid-demo grid-demo-bg1 cl1" id="cf8"><a href="javascript:void(0)" id="8" @click="showclassification">居家好物</a></div>
								</div>
							    <div class="layui-col-xs1">
							      <div class="grid-demo cl1" id="cf9"><a href="javascript:void(0)" id="9" @click="showclassification">电子产品</a></div>
							    </div>
								<div class="layui-col-xs2">
								  <div class="grid-demo"></div>
								</div>
							  </div>
						</div>
				
				
				
				
				
				
			<div style="width: 100%;height: 20px;margin-top: 15px; background-color: #8d2434;"></div>
			
			
			
			<div class="detail_main">
				<div class="layui-carousel" id="test10" >
				  <div class="layui-carousel_1" carousel-item="">
					  <div><a href="#"><img :src="fgdpic"></a></div>
					  <div><a href="#" ><img :src="sgdpic"></a></div>
					  <div><a href="#" ><img :src="tgdpic"></a></div>
				  </div>
				</div>
				<div class="detail_msg" v-for="g in goods ">
					<div class="detail_name">{{g.gname}}</div>
					<div class="detail_remark">{{g.remark}}</div>
					<div class="detail_price">
						<h1 >淘京价：</h1>
						<h1 class="a1">￥</h1>
						<h1 class="price" >{{g.gprice}}</h1>
						</div>
					<div class="detail_version" style="margin-left: 0px;" >
						<div><h1 style="font-size: 22px;">选择款式:</h1></div>
						
						<div class="version1" style="width: 230px" v-for="gdv in goodsdetailver ">
							<a href="javascript:void(0)"><h2>{{gdv}}</h2></a>
						</div>
						
					</div>
					<div class="detail_color"style="margin-left: 0px;" >
						<div><h1 style="font-size: 22px;">选择颜色:</h1></div>
						
						<div class="version2" style="width: 230px" v-for="gdcol in goodsdetailcol ">
							<a href="javascript:void(0)"><h2>{{gdcol}}</h2></a>
						</div>

						
					</div>
					<div class="detail_size"style="margin-left: 0px;">
						<div><h1 style="font-size: 22px;">选择大小:</h1></div>
						
						<div class="version3" style="width: 230px" v-for="gdsiz in goodsdetailsiz ">
							<a href="javascript:void(0)"><h2>{{gdsiz}}</h2></a>
						</div>

						
					</div>
					<div class="detail_num" style="width: 130px;">
						<li class="minus"><a href="javascript:void(0)" @click="decreaseNumber()"><img src="imgs/minus2.png"/></a></li>
						<span id="number">1</span>
						<li class="add"><a href="javascript:void(0)"@click="increaseNumber()"><img src="imgs/add3.png"/></a></li>
					</div>
					<div class="detail_addcart"style="width: 200px;height: 53px; margin-left: 20px;"><a href="javascript:void(0)" style="color: #EEEEEE;" @click="addshoppingcart">加入购物车</a></div>
					<div class="detail_buy"style="width: 200px;height: 53px;margin-left: 20px;"><a href="javascript:void(0)" style="color: #EEEEEE;" @click="addshoppingcart">立刻下单</a></div>
				</div>
			</div>


			<div class="detail_pri">
				
			</div>

			<div id="tishi">
				<div class="tipic">
					<img src="imgs/addshoppingok.png"/>
				</div>
				<div class="lei">
					<h1>成功加入购物车</h1>
				</div>
				<div class="sure" id="isure"><h1><a href="javascript:void(0)" @click="closeshoppingcart">再逛逛</a></h1></div>
				<div class="sure1" id="isure2"><h1><a href="javascript:void(0)" @click="goshoppingcart">去结算</a></h1></div>
			</div>

			<div id="tishi2">
				<div class="tipic2">
					<img src="imgs/addshoppingok.png"/>
				</div>
				<div class="lei2">
					<h1>加入失败，请选择商品类型</h1>
				</div>
				<div class="sure3" id="isure3"><h1><a href="javascript:void(0)" @click="closeshoppingcart2">重新选择</a></h1></div>
				<div class="sure4" id="isure3"><h1><a href="javascript:void(0)" @click="closeshoppingcart2">好的</a></h1></div>
			</div>
			
			<div id="footer" class="footer">
					<p> 关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测 | 质量公告 | 隐私政策 | 京东公益 | Media & IR</p>
			
			<p>京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 药品医疗器械网络服务备案 | 自营医疗器械经营资质 | 药品网络交易第三方平台备案凭证 | 新出发京零 字第大120007号</p>
			
			<p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2020]6112-1201号 | 违法和不良信息举报电话：4006561155</p>
			
			<p>Copyright © 2004 - 2023  京东JINGDONG 版权所有 | 消费者维权热线：4006067733 | 经营证照 | 医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号 | 营业执照 | 增值电信业务经营许可证</p>
			
			<p>京东旗下网站： 京东钱包 | 京东云 | 网络内容从业人员违法违规行为举报电话：4006561155-3
			</p>
		</div>
		</div>
	<script src="js/vue.js"></script>
	<script src="js/axios.js"></script>
	<script src="layui/layui.js"></script>
	<script src="js/jquery-3.4.1.min.js"></script>

		<script>
			// 权限控制
			$(function () {
				$.get("user?op=check", function (rs) {
					console.log(rs);
					if (rs.code == 601) {//暂未登录
						window.location.href = "login.html";
					}
					if (rs.code == 200) {//登录成功
						$("#uname").html(rs.data.user.uname);
						$("#uno").html(rs.data.user.uno);
						$("#login-reg").html("欢迎:"+rs.data.user.uname);
					}
				},"json");
			});

			function logcheck(){
				$.get("user?op=check", function (rs) {
					console.log(rs);
					if (rs.code == 601) {//暂未登录
						window.location.href = "login.html";
					}
					if (rs.code == 200) {//登录成功
						//到个人中心

					}
				},"json");
			}

			function exit(){
				$.get("user?op=exit", function (rs) {
					if (rs == 0) {//注销成功
						$("#uname").html('用户名');
						$("#uno").html('');
						$("#login-reg").html('登录/注册');
						localStorage.removeItem('userData');
						window.location.href = "index.html";
					}else{
						alert('退出失败');
					}
				},"json");
			}
		</script>
	
	<script>

		$(document).on("click",'.version1',function(){
					$(".version1_select").addClass("version1");
					$(".version1_select").removeClass("version1_select");
					$(this).addClass("version1_select");
					
			});
		$(document).on("click",'.version2',function(){
					$(".version2_select").addClass("version2");
					$(".version2_select").removeClass("version2_select");
					$(this).addClass("version2_select");
					
			});
		$(document).on("click",'.version3',function(){
					$(".version3_select").addClass("version3");
					$(".version3_select").removeClass("version3_select");
					$(this).addClass("version3_select");
					
			});
		let path=window.location.hash;
		//地址必须是detail.html#3
		if (path.indexOf("#")<0){
			//地址不正确 跳转到主页面
			window.location.href='index.html';
		}
		//获取商品id
		let id=decodeURIComponent(path.substr(1));

		var userData = localStorage.getItem('userData');
		userData = JSON.parse(userData);
		let uno = userData.uno;



		let sapp=new Vue({
					el:"#detail",
					data:{
						goodsdetail:{},
						goodsdetail2:{},
						goods:{},
						goodsdetailver:[],
						goodsdetailcol:[],
						goodsdetailsiz:[],
						gno:id,
						nu:null,//商品数量
						gdno:null,
						carttotal:null,
						fgdpic:null,
						sgdpic:null,
						tgdpic:null,
						uno:uno
					},
					created(){
						axios.get("cart",{params:{op:"carttotal",uno:this.uno}}).then(rs=>{
							if (rs.status==200){
								this.carttotal=rs.data.carttotal;
							}
						});

						this.getGoodsInfo();
					},

					methods:{
						//分类
						showclassification:function (event) {
							let id=event.target.id;
							let classifica=document.getElementById(id).textContent;
							location.href="search.html#"+classifica;
						},
						getGoodsInfo(){
							axios.get("goodsdetail",{params:{op:"searchGoodsDetail",gno:this.gno}}).then(rs=>{
								if (rs.status==200){
									this.goodsdetail=rs.data.data;
									this.$forceUpdate();
									//对属性做判断，如果一样则剔除
									for (let i=0;i<this.goodsdetail.length;i++){
										if(!this.goodsdetailver.includes(this.goodsdetail[i].version)){
											this.goodsdetailver.push(this.goodsdetail[i].version);
										}
										if(!this.goodsdetailcol.includes(this.goodsdetail[i].color)){
											this.goodsdetailcol.push(this.goodsdetail[i].color);
										}
										if(!this.goodsdetailsiz.includes(this.goodsdetail[i].size)){
											this.goodsdetailsiz.push(this.goodsdetail[i].size);
										}
									}
									console.log(this.goodsdetailver)
								}
							});
							axios.get("tj",{params:{op:"findGoods",gno:this.gno}}).then(rs=>{
								if (rs.status==200){
									console.log(rs);
									this.goods=rs.data.data;
									this.changePics();
								}
							})
						},
						//增加
					   increaseNumber:function() {
					      let numberElement = document.getElementById("number");
					      let currentNumber = parseInt(numberElement.innerHTML);
					      numberElement.innerHTML = currentNumber + 1;
					    },
						//减少
						decreaseNumber:function() {
							let numberElement = document.getElementById("number");
							let currentNumber = parseInt(numberElement.innerHTML);
							if(currentNumber>1){
								numberElement.innerHTML = currentNumber - 1;
							}
						},
						//添加购物车
						addshoppingcart:function (event) {
							let element1=document.querySelector('.version1_select');
							let element2=document.querySelector('.version2_select');
							let element3=document.querySelector('.version3_select');

							if (element1!=null&&element2!=null&&element3!=null){
								var ver = document.querySelector('.version1_select').textContent;
								var col = document.querySelector('.version2_select').textContent;
								var siz = document.querySelector('.version3_select').textContent;
								//获取gdno
								axios.get("goodsdetail",{params:{op:"searchGoodsDetail",gno:this.gno,version:ver,color:col,size:siz}}).then(rs=>{
									if (rs.status==200){
										this.goodsdetail2=rs.data.data;
									}
									if (this.goodsdetail2==null){
										alert("暂无库存，请选择其他类型");
									}else {
										this.gdno=this.goodsdetail2[0].gdno;
										//获取数量
										// 获取 id 为 number 的 span 元素
										this.nu = document.querySelector('#number').textContent;
										//添加到购物车
										axios.get("cart",{params:{op:"addshoppingcart",number:this.nu,uno:this.uno,gdno:this.gdno}}).then(rs=>{
											if (rs.status==200){
												this.carttotal=rs.carttotal;
												//点击提示添加到购物车成功
												// 获取要隐藏或显示的内容元素
												var hiddenContent = document.getElementById('tishi');
												// 获取目标链接元素
												var link = document.getElementById('link');
												// 监听链接的点击事件
												event.preventDefault(); // 阻止链接的默认跳转行为
												hiddenContent.style.display = 'flex'; // 显示隐藏的内容
											}
										});
									}

								});
							} else {
								var hiddenContent = document.getElementById('tishi2');
								// 获取目标链接元素
								var link = document.getElementById('link2');
								// 监听链接的点击事件
								event.preventDefault(); // 阻止链接的默认跳转行为
								hiddenContent.style.display = 'flex'; // 显示隐藏的内容
							}


						},
						closeshoppingcart:function (event) {
							//点击关闭
							// 获取要隐藏或显示的内容元素
							var hiddenContent = document.getElementById('tishi');
							// 获取目标链接元素
							var sure = document.getElementById('isure');
							// 监听链接的点击事件
							event.preventDefault();// 阻止链接的默认跳转行为
							hiddenContent.style.display = 'none'; // 隐藏
							//刷新页面
							location.reload();
						},
						goshoppingcart:function (event) {
							//点击关闭
							// 获取要隐藏或显示的内容元素
							var hiddenContent = document.getElementById('tishi');
							// 获取目标链接元素
							var sure = document.getElementById('isure');
							// 监听链接的点击事件
							event.preventDefault();// 阻止链接的默认跳转行为
							hiddenContent.style.display = 'none'; // 隐藏
							location.href="cart.html#"+this.uno;/*点击结算，跳转到购物车页面，传入用户id*/
						},
						closeshoppingcart2:function (event) {
							//点击关闭
							// 获取要隐藏或显示的内容元素
							var hiddenContent = document.getElementById('tishi2');
							// 获取目标链接元素
							var sure = document.getElementById('isure3');
							// 监听链接的点击事件
							event.preventDefault();// 阻止链接的默认跳转行为
							hiddenContent.style.display = 'none'; // 隐藏
						},
						changePics:function () {
							for (let i=0;i<this.goods.length;i++){
								console.log(this.goods);
								var gpics=this.goods[i].gpics;
								if (gpics.indexOf(";")>0){
									//获取第一张照片
									var fgpics=gpics.substr(0,gpics.indexOf(";"));
									this.fgdpic=fgpics;
									console.log(this.fgdpic);
									// 获取第二张照片
									var secondPhotoStartIndex = gpics.indexOf(";") + 1; // 第二张照片的起始索引
									var secondPhotoEndIndex = gpics.indexOf(";", secondPhotoStartIndex); // 第二张照片的结束索引
									var secondPhoto = gpics.substr(secondPhotoStartIndex, secondPhotoEndIndex - secondPhotoStartIndex);
									this.sgdpic=secondPhoto;
									console.log(this.sgdpic);
									// 获取第三张照片
									var thirdPhotoStartIndex = secondPhotoEndIndex + 1; // 第三张照片的起始索引
									var thirdPhoto = gpics.substr(thirdPhotoStartIndex); // 获取第三张照片
									this.tgdpic=thirdPhoto;
									console.log(this.tgdpic);
								}
							}
						}
						
					}
				});
				
				
				
				
				
				
				
		layui.use(['carousel', 'form'], function(){
		  var carousel = layui.carousel
		  ,form = layui.form;
		  
		  //图片轮播
		  carousel.render({
		    elem: '#test10'
		    ,width: '520px'
		    ,height: '520px'
			,autoplay:false
		  });
		});

		</script>
	</body>
</html>
